<template>
  <div>
    <h2>今天的天气{{ text }}</h2>
    <img width="100px" :src="url" alt="" /><br />
    <button @click="showClick">确定</button>
  </div>
</template>

<script>
export default {
  name: "demo1",
  data() {
    return {
      isHot: true,
      url: "http://49.232.112.44/images/hot.jpg",
    };
  },
  computed: {
    text() {
      return this.isHot ? "炎热" : "寒冷";
    },
  },
  methods: {
    showClick() {
      return (this.isHot = !this.isHot);
    },
  },
  watch: {
    isHot(newValue) {
      if (newValue) {
        this.url = "http://49.232.112.44/images/hot.jpg";
      } else {
        this.url = "http://49.232.112.44/images/cool.jpg";
      }
    },
  },
};
</script>

<style scoped>
</style>